<template>
  <div class="content-body">
    <div class="content-li">
      <div class="content-line" @click="download">
        <el-image v-if="entity.suffix === 'doc'|| entity.suffix === 'docx'" :src="doc" class="line-image" />
        <el-image v-if="entity.suffix === 'xls'|| entity.suffix === 'xlsx'" :src="excel" class="line-image" />
        <el-image v-if="entity.suffix === 'png'|| entity.suffix === 'jpg' || entity.suffix === 'jpeg'" :src="gif" class="line-image" />
        <span>{{ entity.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { queryEntity, queryGuestEntity } from '@/api/portal/manager/analysis/index';
import { getToken } from '@/utils/auth';
export default {
  name: 'AttachmentEntityV1',
  props: {
    params: {
      type: Array
    },
    temp: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      tid: null, // 模版主键
      query: null,
      setting: null,
      entity: { },
      doc: require('@/assets/images/doc.png'),
      eps: require('@/assets/images/eps.png'),
      excel: require('@/assets/images/excel.png'),
      gif: require('@/assets/images/gif.png'),
      pdf: require('@/assets/images/pdf.png'),
      ppt: require('@/assets/images/ppt.png'),
      txt: require('@/assets/images/txt.png'),
      zip: require('@/assets/images/zip.png')
    };
  },
  watch: {
    temp: {
      handler(newName, oldName) {
        if (undefined !== newName.pzx) {
          this.setting = JSON.parse(newName.pzx);
        }
        console.log(this.setting);
        this.tid = newName.id;
        this.query = this.params;
        this.initObject();
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    download() {
      window.open(this.entity.url, '_blank ');
    },
    initObject() {
      const params = { tid: this.tid };
      if (this.query !== null && this.query.length > 0) {
        this.query.forEach(item => {
          params[item.code] = item.value;
        });
      }
      if (getToken()) {
        queryEntity(params).then(res => {
          const { data } = res;
          this.entity = data;
        }).catch(() => {
          console.log(1);
        });
      } else {
        queryGuestEntity(params).then(res => {
          const { data } = res;
          this.entity = data;
        }).catch(() => {
          console.log(1);
        });
      }
    }
  }
};
</script>
<style scoped>
.content-body {
  width: 100%;
  height: 100%;
  padding: 0px 15px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
  min-height: 50rem;
}
.content-li {
  flex: 0 1 auto;
  width: 100%;
  height: 60px;
  text-align: left;
  line-height: 60px;
}
.content-line  {
  width: 100%;
  height: 60px;
  line-height: 60px;
  color: #409eff;
  display: flex;
  flex-flow: row nowrap;
  cursor: pointer;
}
.content-line .line-image {
  height: 40px;
  margin-top: 10px;
}
</style>
